<template>
  <div class="main-page">
    <div class="page-title">
      <span>房产供需分析-{{ mainTypeLabel }}</span>
      <div class="top-tab">
        <div class="top-tab-left">
          <div class="top-tab-left-item" v-for="(item, index) in ['统计', '分析']" :key="index" @click="goOtherPage(item)">{{ item }}</div>
        </div>
        <div class="top-tab-right">
          <div class="top-tab-right-item" @click="goOtherPage('模拟测算')">模拟测算</div>
          <span>{{ currentYearMonthDay }}</span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <el-col :span="9">
          <div class="house-property-land-supply-statistics">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产土地供应统计</p>
            </div>
            <div class="house-property-land-supply-statistics-total-select">
              <el-select class="house-property-land-supply-statistics-area-select" v-model="housePropertyLandSupplyStatisticsData.areaCode" size="small"
                         @change="changeHousePropertyLandSupplyStatisticsSelect">
                <el-option
                    v-for="item in cityAndAreaList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                    class="custom-select-option"
                />
              </el-select>
              <el-select class="house-property-land-supply-statistics-type-select" v-model="housePropertyLandSupplyStatisticsData.acreageType" size="small"
                         @change="changeHousePropertyLandSupplyStatisticsSelect">
                <el-option
                    v-for="item in housePropertyLandSupplyStatisticsData.acreageTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                    class="custom-select-option"
                />
              </el-select>
            </div>
            <div class="module-title-content-middle-line m-b-11"></div>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="house-property-land-supply-statistics__left">
                  <div class="house-property-land-supply-statistics__left-title">
                    <span>新增房屋建筑面积情况</span>
                    <time-filtrate-public class="time-filtrate-public" :isAreaSelectShow="false" :cityAndAreaList="cityAndAreaList" style="max-width: 360px" @changeFiltrateTime="changeFiltrateTime($event, 'housePropertyLandSupplyStatistics')"></time-filtrate-public>
                  </div>
                  <public-pie
                    v-if="housePropertyLandSupplyStatisticsData.seriesData?.length"
                    ref="housePropertyLandSupplyStatistics"
                    :pieData="housePropertyLandSupplyStatisticsData"
                    class="h250"
                    @click="fullSc('publicPie', housePropertyLandSupplyStatisticsData, 'housePropertyLandSupplyStatistics')"
                  ></public-pie>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="house-property-land-supply-statistics__right">
                  <div class="house-property-land-supply-statistics__right-title">
                    <span>土地供应走势</span>
                  </div>
                  <line-land-supply-trend
                      v-if="landSupplyTrendData.xAxisData?.length"
                      ref="landSupplyTrend"
                      :lineData="landSupplyTrendData"
                      class="h250"
                      @click="fullSc('lineLandSupplyTrend', landSupplyTrendData, 'landSupplyTrend')"
                      @changeXAxisTimeType="landSupplyTrendData.xAxisTimeType = $event"
                  ></line-land-supply-trend>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="house-property-house-inventory-statistics">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产房屋库存统计</p>
            </div>
            <div class="house-property-house-inventory-statistics-total-select">
              <el-select class="house-property-house-inventory-statistics-area-select" v-model="housePropertyHouseInventoryStatisticsData.areaCode" size="small"
                         @change="changeHousePropertyHouseInventoryStatisticsSelect">
                <el-option
                    v-for="item in cityAndAreaList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                    class="custom-select-option"
                />
              </el-select>
              <el-select class="house-property-house-inventory-statistics-type-select" v-model="housePropertyHouseInventoryStatisticsData.inventoryType" size="small"
                         @change="changeHousePropertyHouseInventoryStatisticsSelect">
                <el-option
                    v-for="item in housePropertyHouseInventoryStatisticsData.inventoryTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                    class="custom-select-option"
                />
              </el-select>
            </div>
            <div class="module-title-content-middle-line m-b-11"></div>
            <el-row :gutter="10" style="position: relative;">
              <el-col :span="12">
                <div class="house-property-house-inventory-statistics__left">
                  <div class="house-property-house-inventory-statistics__left-title">
                    <span>待售房屋供应情况</span>
                    <time-filtrate-public class="time-filtrate-public" :isAreaSelectShow="false" :cityAndAreaList="cityAndAreaList" style="max-width: 360px" @changeFiltrateTime="changeFiltrateTime($event, 'housePropertyHouseInventoryStatistics')"></time-filtrate-public>
                  </div>
                  <public-pie
                    v-if="housePropertyHouseInventoryStatisticsData.seriesData?.length"
                    ref="housePropertyHouseInventoryStatistics"
                    :pieData="housePropertyHouseInventoryStatisticsData"
                    class="h250"
                    @click="fullSc('publicPie', housePropertyHouseInventoryStatisticsData, 'housePropertyHouseInventoryStatistics')"
                  ></public-pie>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="house-property-house-inventory-statistics__right">
                  <div class="house-property-house-inventory-statistics__right-title">
                    <span>库存走势</span>
                  </div>
                  <line-inventory-trend
                      v-if="inventoryTrendData.seriesData.length"
                      ref="inventoryTrend"
                      class="h250"
                      :lineData="inventoryTrendData"
                      @click="fullSc('lineInventoryTrend', inventoryTrendData, 'inventoryTrend')"
                      @changeXAxisTimeType="inventoryTrendData.xAxisTimeType = $event"
                  ></line-inventory-trend>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="local-city-every-area-house-property-acreage-supply-statistics">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>本地各区房地产面积供应统计</p>
            </div>
            <time-filtrate-public
                class="time-filtrate-public"
                :isAreaSelectShow="false"
                isContainYearRange
                style="max-width: 360px"
                @changeFiltrateTime="changeFiltrateTime($event, 'localCityEveryAreaHousePropertyAcreageSupplyStatistics')"
                @changeTimeType="changeFiltrateTimeType"
            ></time-filtrate-public>
            <div class="house-property-acreage-tabs" :class="housePropertyAcreageTabsClass">
              <el-select class="house-property-acreage-select" v-model="currentHousePropertyAcreageTab" size="small"
                         @change="(event) => changeHousePropertyAcreageTab(event)">
                <el-option
                    v-for="item in housePropertyAcreageTabs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    class="custom-select-option"
                />
              </el-select>
            </div>
            <div class="module-title-content-middle-line" style="margin-bottom: 0px;"></div>
            <bar-local-city-every-area-house-property-acreage-supply-statistics v-if="localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.seriesData?.length" ref="localCityEveryAreaHousePropertyAcreageSupplyStatistics" :barData="localCityEveryAreaHousePropertyAcreageSupplyStatisticsData" class="h132" @click="fullSc('barLocalCityEveryAreaHousePropertyAcreageSupplyStatistics', localCityEveryAreaHousePropertyAcreageSupplyStatisticsData)"></bar-local-city-every-area-house-property-acreage-supply-statistics>
          </div>
        </el-col>
        <el-col :span="15">
          <el-row :gutter="30">
            <el-col :span="10" style="position: relative">
              <div class="middle-map">
                <map-box
                    :listData="mapList"
                    :mapConfig="{layoutSize: '105%'}"
                    @mapNameChange="mapNameChange"
                ></map-box>
                <div class="map-address">辽宁省{{ cityObj.name ? `-${cityObj.name}` : '' }}</div>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="house-property-sales-status-statistics">
                <div class="main-content-gird-title">
                  <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                       alt=""/>
                  <p>房地产销售情况统计</p>
                </div>
                <time-filtrate-public class="time-filtrate-public" :cityAndAreaList="cityAndAreaList" style="max-width: 360px" @changeFiltrateTime="changeFiltrateTime($event, 'housePropertySalesStatusStatistics')"></time-filtrate-public>
                <div class="module-title-content-middle-line m-b-11"></div>
                <div class="house-property-sales-status-statistics-select">
                  <div>
                    <span>房屋标签：</span>
                    <el-cascader
                      class="multiple-select house-property-sales-status-statistics-house-type-select"
                      popper-class="cascader-public-popper"
                      v-model="productAndBuyerRelationshipData.houseTag"
                      :options="productAndBuyerRelationshipData.houseOptions"
                      :props="{ multiple: true }"
                      collapse-tags
                      collapse-tags-tooltip
                      clearable
                      size="small"
                      @change="changeProductAndBuyerRelationshipHouseTypeCascader"
                    />
                  </div>
                  <div>
                    <span>购房人标签：</span>
                    <el-cascader
                      class="multiple-select house-property-sales-status-statistics-buy-house-person-select"
                      popper-class="cascader-public-popper"
                      v-model="productAndBuyerRelationshipData.buyHousePersonTag"
                      :options="productAndBuyerRelationshipData.buyHousePersonOptions"
                      :props="{ multiple: true }"
                      collapse-tags
                      collapse-tags-tooltip
                      clearable
                      size="small"
                      @change="changeProductAndBuyerRelationshipBuyHousePersonCascader"
                    />
                  </div>
                </div>
                <div class="product-and-buyer-relation-ship-chart">
                  <graph-component
                      v-if="productAndBuyerRelationshipData.seriesData.data?.length"
                      ref="productAndBuyerRelationship"
                      :graphData="productAndBuyerRelationshipData"
                      class="h275"
                      @click="fullSc('graphComponent', productAndBuyerRelationshipData)"
                  ></graph-component>
                </div>
                <div style="position: relative">
                  <div class="house-property-sales-status-statistics__title">
                    <div style="width: 30%">
                      <span>房屋销量趋势统计</span>
                    </div>
                    <div class="house-property-sales-trend-statistics-select">
                      <span>房屋标签：</span>
                      <el-cascader
                        class="multiple-select house-property-sales-status-statistics-house-type-select"
                        popper-class="cascader-public-popper"
                        v-model="houseSalesTrendStatisticsData.houseTag"
                        :options="productAndBuyerRelationshipData.houseOptions"
                        :props="{ multiple: true }"
                        collapse-tags
                        collapse-tags-tooltip
                        clearable
                        size="small"
                        @change="changeHouseSalesTrendStatisticsHouseTypeCascader"
                      />
                      <el-select class="house-property-sales-trend-statistics-city-or-area-select" v-model="houseSalesTrendStatisticsData.areaCode" size="small"
                                 @change="initHouseSalesTrendStatistics">
                        <el-option
                            v-for="item in cityAndAreaList"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                            class="custom-select-option"
                        />
                      </el-select>
                    </div>
                  </div>
                  <line-house-sales-trend-statistics
                      v-if="houseSalesTrendStatisticsData.seriesData[0]?.length"
                      ref="houseSalesTrendStatistics"
                      style="position: relative; width: 100%" class="h135"
                      :lineData="houseSalesTrendStatisticsData"
                      @changeXAxisTimeType="houseSalesTrendStatisticsData.xAxisTimeType = $event"
                      @click="fullSc('lineHouseSalesTrendStatistics', houseSalesTrendStatisticsData, 'houseSalesTrendStatistics')"
                  ></line-house-sales-trend-statistics>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="main-content-right-bottom">
            <div class="main-content-gird-title" style="justify-content: space-between">
              <div class="main-content-gird-title-economic-statistics">
                <img class="main-content-gird-title-logo"
                     src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt=""/>
                <p>房地产交易聚类分析</p>
              </div>
            </div>
            <time-filtrate-public class="time-filtrate-public" :cityAndAreaList="cityAndAreaList" style="max-width: 360px" @changeFiltrateTime="changeFiltrateTime($event, 'housePropertyTradeClusterAnalysis')"></time-filtrate-public>
            <div class="module-title-content-middle-line m-b-11"></div>
            <div class="house-property-trade-cluster-analysis">
              <house-property-trade-cluster-analysis :tradeClusterData="clusterData" @click="fullSc('housePropertyTradeClusterAnalysis', clusterData)" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{
          fontSizeTimes: 2
        }"
        v-bind="{...magnifyData.props}"
        @dialogEmit="dialogEmit"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import lineLandSupplyTrend from '@/components/housePropertyAnalysis/statistics/lineLandSupplyTrend.vue'
import barLocalCityEveryAreaHousePropertyAcreageSupplyStatistics from '@/components/housePropertyAnalysis/statistics/barLocalCityEveryAreaHousePropertyAcreageSupplyStatistics.vue'
import lineInventoryTrend from '@/components/housePropertyAnalysis/statistics/lineInventoryTrend.vue'
import graphComponent from '@/components/housePropertyAnalysis/statistics/graphPublic.vue'
import lineHouseSalesTrendStatistics from '@/components/housePropertyAnalysis/statistics/lineHouseSalesTrendStatistics.vue'
import clusterTableList from '@/components/housePropertyAnalysis/statistics/clusterTableList.vue'
import clusterPie from '@/components/housePropertyAnalysis/statistics/clusterPie.vue'
import housePropertyTradeClusterAnalysis from '@/components/housePropertyAnalysis/statistics/housePropertyTradeClusterAnalysis.vue'
import publicPie from '@/components/housePropertyAnalysis/statistics/publicPie.vue'

export default {
  components: {
    lineLandSupplyTrend,
    barLocalCityEveryAreaHousePropertyAcreageSupplyStatistics,
    lineInventoryTrend,
    graphComponent,
    lineHouseSalesTrendStatistics,
    clusterTableList,
    clusterPie,
    housePropertyTradeClusterAnalysis,
    publicPie
  },
};
</script>

<script setup>
import {onMounted, ref, computed, inject, nextTick, watch} from "vue";
import { useRouter } from "vue-router";

import mapBox from "@/components/housePropertyAnalysis/statistics/map.vue";
import acreageTabBg from "@/assets/img/housePropertyAnalysis/statistics/acreage-tab-bg.png"
import chosenAcreageTabBg from "@/assets/img/housePropertyAnalysis/statistics/chosen-acreage-tab-bg.png"
import boxplotComponent from '@/components/housePropertyAnalysis/statistics/boxplotPublic.vue'
import filtrateYearRange from '@/components/public/filtrateYearRange.vue'
import timeFiltratePublic from "@/components/housePropertyAnalysis/timeFiltratePublic.vue";

import {
  getSupplyDemandProductHousehold, // 产品与购房人关系-关系图-graph
  getSupplyDemandMacroeconomic, // 宏观经济数据统计-散点图-scatter
  getSupplyDemandRoomSelection, // 房屋销量趋势统计户型下拉选
  getSupplyDemandHouseSalesTrends, // 房屋销量趋势统计-line
  getSupplyDemandLandSupply, // 房地产土地供应统计-矩形树图和折线图
  getSupplyDemandAreaSupply, // 本地各区房地产面积供应统计-柱形图
  getSupplyDemandDeveloperNum, // 房地产房屋库存统计-矩形树图和折线图
  getSupplyDemandPolicyList, // 政策列表
  getPersonHousePersonHousePopulation, // 微观经济数据统计
  getSupplyDemandFetchNewBuildArea, // 新-房地产土地供应统计-新增房屋建筑面积情况
  getSupplyDemandCalculateLandSupplyTrend, // 新-房地产土地供应统计-土地供应走势
  getSupplyDemandGetHousingInventoryStats, // 新-房地产房屋库存统计-待售房屋供应情况
  getSupplyDemandGetInventoryTrend, // 新-房地产房屋库存统计-库存走势
  getTransanalysisRecommendedMainstreamLayout, // 新-房地产销售情况统计-graph-关系图
  getSupplyDemandGetAreaSupplyStats, // 新-本地各区房地产面积供应统计
  getSupplyDemandLabelProperty, // 新-房屋标签/购房人标签
  getSupplyDemandGetHouseSales, // 新-房屋销量趋势统计
} from "@/api/housePropertyAnalysis/statistics";

import {pxToRem} from "@/utils/index";
import { processBoxPlotData } from "@/utils/index";
import {getSupplyDemandGetRegion} from "@/api/housePropertyAnalysis/analysis";

const router = useRouter();

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: '',
  moduleName: ''
})

const cityAndAreaList = ref([]) // 公共顶部时间筛选城市区列表
const cityObj = ref({
  name: '沈阳市',
  code: '210100'
}) // 地图-市名

const echarts = inject('echarts');
const mainType = ref('statistics') // 页面主tab
const currentYearRange = ref(null) // 当前年份
const currentYearMonthDay = ref(null) // 当前年月日
const housePropertyLandSupplyStatisticsData = ref({ // 房地产土地供应统计-新增房屋建筑面积情况-data
  acreageType: 0, // 面积类型
  acreageTypeList: [ // 面积类型列表
    {
      name: '全部面积',
      label: '全部',
      code: 0,
    },
    {
      name: '规划面积',
      label: '规划',
      code: 1
    },
    {
      name: '未开工面积',
      label: '未开工',
      code: 2
    },
    {
      name: '在建面积',
      label: '在建',
      code: 3
    },
  ],
  seriesData: [],
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
  moduleName: 'housePropertyLandSupplyStatistics'
})

const landSupplyTrendData = ref({ // 房地产土地供应统计-土地供应走势-data
  xAxisData: [],
  seriesData: [],
  acreage: 0,
  percentage: 100,
  xAxisTimeType: 'year',
  moduleName: 'landSupplyTrend'
})
watch( // 房地产土地供应统计-土地供应走势-监听x轴年月切换
    () => landSupplyTrendData.value.xAxisTimeType,
    (newVal) => {
      initHousePropertyLandSupplyStatisticsLandSupplyTrend();
    }
)

const localCityEveryAreaHousePropertyAcreageSupplyStatisticsData = ref({ // 本地各区房地产面积供应统计-data
  xAxisData: [],
  seriesData: [],
  lineData: [],
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: ''
})

const housePropertyHouseInventoryStatisticsData = ref({ // 房地产房屋库存统计-待售房屋供应情况-data
  inventoryType: 0,
  inventoryTypeList: [
    {
      name: '全部库存',
      code: 0,
    },
    {
      name: '已建未售',
      code: 1,
    },
    {
      name: '法拍房',
      code: 3,
    },
    {
      name: '预售待售',
      code: 4,
    },
    {
      name: '待售',
      code: 5,
    },
  ],
  seriesData: [],
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
  moduleName: 'housePropertyHouseInventoryStatistics'
})

const inventoryTrendData = ref({ // 房地产房屋库存统计-库存走势-data
  xAxisData: [],
  originalSeriesData: [],
  legendData: [],
  seriesData: [],
  xAxisTimeType: 'year',
  moduleName: 'inventoryTrend'
})
watch( // 房地产房屋库存统计-库存走势-监听x轴年月切换
    () => inventoryTrendData.value.xAxisTimeType,
    (newVal) => {
      initHousePropertyHouseInventoryStatisticsInventoryTrend();
    }
)

const productAndBuyerRelationshipData = ref({ // 产品与购房人关系-data
  seriesData: {
    data: [],
    // 节点间的关系数据
    links: [],
    categories: []
  },
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
  houseTag: [], // 房屋标签value
  houseOptions: [], // 房屋标签select-list
  buyHousePersonTag: [], // 购房人标签value
  buyHousePersonOptions: [], // 购房人标签select-list
})

const houseSalesTrendStatisticsData = ref({ // 房屋销量趋势统计-data
  legendData: [
    {
      name: '库存',
      itemStyle: {
        color: '#0E81FF'
      }
    },
    {
      name: '销量',
      itemStyle: {
        color: '#F8F364'
      }
    }
  ],
  xAxisData: [],
  seriesData: [
      [],
      []
  ],
  houseTag: [], // 房屋标签select多选
  areaCode: cityObj.value.code,
  xAxisTimeType: 'year',
  moduleName: 'houseSalesTrendStatistics'
})
watch( // 房地产销售情况统计-房屋销量趋势统计-line-监听x轴年月切换
    () => houseSalesTrendStatisticsData.value.xAxisTimeType,
    (newVal) => {
      initHouseSalesTrendStatistics(); // 房地产销售情况统计-房屋销量趋势统计-line
    }
)

const microEconomicDataStatisticsAllAgesData = ref({ // 微观经济数据统计-各年龄买房人群统计-data
  xAxisData: [],
  seriesData: []
})

const microEconomicDataStatisticsAlreadyBoughtHouseData = ref({ // 微观经济数据统计-已购房人购房数据分布-data
  xAxisData: [],
  seriesData: []
})

const macroEconomicDataStatisticsData = ref({ // 宏观经济数据统计-data
  areaNameList: [], // 区列表
  timelineList: [], // 时间线
  series: [] // 渲染数据
})

const housePropertyLandSupplyStatistics = ref(null) // dom-ref
const landSupplyTrend = ref(null)
const localCityEveryAreaHousePropertyAcreageSupplyStatistics = ref(null)
const housePropertyHouseInventoryStatistics = ref(null)
const inventoryTrend = ref(null)
const productAndBuyerRelationship = ref(null)
const houseSalesTrendStatistics = ref(null)

const mainTypeLabel = computed(() => { // 页面主tab文案
  switch (mainType.value) {
    case 'statistics':
      return '统计';
    case 'analysis':
      return '分析';
    case 'forecast':
      return '模拟测算';
    default:
      return '统计'
  }
})

const housePropertyAcreageTabs = ref([ // 本地各区房地产面积供应统计tabs
  {
    label: '规划面积',
    value: 1
  },
  {
    label: '开工面积',
    value: 2
  },
  {
    label: '在建面积',
    value: 3
  },
  {
    label: '商品房面积',
    value: 4
  },
  {
    label: '烂尾楼面积',
    value: 5
  }
])
const currentHousePropertyAcreageTab = ref(1) // 当前本地各区房地产面积供应统计
const mapList = ref([
  {name: '沈阳市', value: 0, code: '210100', select: { disabled: false }, selected: true, },
  {name: '大连市', value: 0, code: '210200', select: { disabled: true }},
  {name: '鞍山市', value: 0, code: '210300', select: { disabled: true }},
  {name: '抚顺市', value: 0, code: '210400', select: { disabled: true }},
  {name: '本溪市', value: 0, code: '210500', select: { disabled: true }},
  {name: '丹东市', value: 0, code: '210600', select: { disabled: true }},
  {name: '锦州市', value: 0, code: '210700', select: { disabled: true }},
  {name: '营口市', value: 0, code: '210800', select: { disabled: true }},
  {name: '阜新市', value: 0, code: '210900', select: { disabled: true }},
  {name: '辽阳市', value: 0, code: '211000', select: { disabled: true }},
  {name: '盘锦市', value: 0, code: '211100', select: { disabled: true }},
  {name: '铁岭市', value: 0, code: '211200', select: { disabled: true }},
  {name: '朝阳市', value: 0, code: '211300', select: { disabled: true }},
  {name: '葫芦岛市', value: 0, code: '211400', select: { disabled: true }},
])
const currentDeveloper = ref('全部开发商') // 当前开放商select-value
const currentHouseType = ref('全部户型') // 当前户型select-value

const dialogRef = ref(null) // chart图放大-domref

const clusterData = ref({ // 房地产交易画像分析
  tableData: [
    {content: '楼层：1-10；购房人年龄：20-30岁；房屋均价: 100万元'},
    {content: '楼层：11-20；购房人年龄：20-30岁；房屋均价: 150万元'},
    {content: '楼层：21-30；购房人年龄：31-40岁；房屋均价: 200万元'},
    {content: '楼层：31-40；购房人年龄：41-50岁；房屋均价: 125万元'},
    {content: '楼层：41-50；购房人年龄：51-60岁；房屋均价: 60万元'},
  ],
  tableColumnData: [
    {
      label: '画像',
      key: 'index',
      type: 'index',
      width: pxToRem(60)
    },
    {
      label: '聚类规则',
      key: 'content',
    }
  ],
  afterClusterData: {
    xAxisData: [],
    seriesData: []
  },
  clusterPieData: [
    {
      name: '画像1',
      value: 30,
      percentage: 33.33,
      children: [
        {
          name: '购房人年龄>32岁',
          percentage: 20
        },
        {
          name: '房屋均价>12300元',
          percentage: 50
        },
        {
          name: '房屋楼层>10层',
          percentage: 20
        },
      ]
    },
    {
      name: '画像2',
      value: 20,
      percentage: 33.33,
      children: [
        {
          name: '购房人年龄>20岁',
          percentage: 10
        },
        {
          name: '房屋均价>10000元',
          percentage: 50
        },
        {
          name: '房屋楼层>20层',
          percentage: 13
        },
      ]
    },
    {
      name: '画像3',
      value: 30,
      percentage: 20,
      children: [
        {
          name: '购房人年龄>25岁',
          percentage: 55
        },
        {
          name: '房屋均价>20000元',
          percentage: 14
        },
        {
          name: '房屋楼层>16层',
          percentage: 32
        },
      ]
    },
    {
      name: '画像4',
      value: 10,
      percentage: 33.33,
      children: [
        {
          name: '购房人年龄>40岁',
          percentage: 22
        },
        {
          name: '房屋均价>15000元',
          percentage: 12
        },
        {
          name: '房屋楼层>20层',
          percentage: 18
        },
      ]
    },
    {
      name: '画像5',
      value: 10,
      percentage: 33.33,
      children: [
        {
          name: '购房人年龄>50岁',
          percentage: 10
        },
        {
          name: '房屋均价>8000元',
          percentage: 20
        },
        {
          name: '房屋楼层>30层',
          percentage: 10
        },
      ]
    },
  ],
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: '',
  selectValue: [],
  selectOptions: [
    {
      label: '户型居室/一居室', value: '户型居室/一居室',
    },
    {
      label: '户型居室/二居室', value: '户型居室/二居室',
    },
    {
      label: '户型居室/三居室', value: '户型居室/三居室',
    },
    {
      label: '户型居室/四居室', value: '户型居室/四居室',
    },
    {
      label: '户型居室/五居室', value: '户型居室/五居室',
    },
  ]
})

const housePropertyAcreageTabsClass = computed(() => {
  return localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.type == 4 ? 'house-property-acreage-tabs-year-range' : ''
})

const initHousePropertyLandSupplyStatisticsSunBurst = () => { // 房地产土地供应统计-新增房屋建筑面积情况-getData
  getSupplyDemandFetchNewBuildArea({
    adcode: housePropertyLandSupplyStatisticsData.value.areaCode,
    dateType: housePropertyLandSupplyStatisticsData.value.type,
    startTime: housePropertyLandSupplyStatisticsData.value.startTime,
    endTime: housePropertyLandSupplyStatisticsData.value.endTime,
    requestType: housePropertyLandSupplyStatisticsData.value.acreageType,
  }).then(res => {
    const resData = res?.data
    housePropertyLandSupplyStatisticsData.value.seriesData = []
    if (housePropertyLandSupplyStatisticsData.value.acreageType === 0) { // 全部面积
      if (resData?.length) {
        housePropertyLandSupplyStatisticsData.value.seriesData = resData?.map(x => {
          return {
            ...x,
            name: x.typeName,
            value: x.sumArea,
            percentageYoy: x.sumTb,
            percentageMom: x.sumHb
          }
        })
      }
    } else { // 规划、未开工、在建面积
      if (resData && Object.keys(resData)?.length) {
        const tempLabel = housePropertyLandSupplyStatisticsData.value.acreageTypeList?.find(x => x.code === housePropertyLandSupplyStatisticsData.value.acreageType)?.label
        housePropertyLandSupplyStatisticsData.value.seriesData.push({
          ...resData?.['symjMap'],
          name: `${tempLabel}-商业`,
          value: resData?.['symjMap']?.symj,
          percentageYoy: resData?.['symjMap']?.symjTb,
          percentageMom: resData?.['symjMap']?.symjHb
        })
        housePropertyLandSupplyStatisticsData.value.seriesData.push({
          ...resData?.['zzmjMap'],
          name: `${tempLabel}-住宅`,
          value: resData?.['zzmjMap']?.zzmj,
          percentageYoy: resData?.['zzmjMap']?.zzmjTb,
          percentageMom: resData?.['zzmjMap']?.zzmjHb
        })
      }
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      housePropertyLandSupplyStatistics.value?.updateChart();
    })
  })
}
const initHousePropertyLandSupplyStatisticsLandSupplyTrend = () => { // 房地产土地供应统计-土地供应走势-getData
  getSupplyDemandCalculateLandSupplyTrend({
    adcode: housePropertyLandSupplyStatisticsData.value.areaCode,
    requestType: housePropertyLandSupplyStatisticsData.value.acreageType,
    dateType: landSupplyTrendData.value.xAxisTimeType === 'month' ? 1 : 2
  }).then(res => {
    const resData = res?.data
    landSupplyTrendData.value.xAxisData = [0]
    landSupplyTrendData.value.seriesData = []
    if (resData?.dateList?.length) {
      landSupplyTrendData.value.xAxisData = landSupplyTrendData.value.xAxisData.concat(resData.dateList)
      const tempObj = {
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: true,
        areaStyle: {
          opacity: 0.7,
        }
      }
      if (housePropertyLandSupplyStatisticsData.value.acreageType === 0) { // 全部面积
        const tempKeyArray = [{name: '规划', key: 'ghList', z: 2},{name: '未开工', key: 'wkgList', z: 3},{name: '在建', key: 'zjList', z: 1}]
        tempKeyArray.forEach(x => {
          landSupplyTrendData.value.seriesData.push({
            data: [0].concat(resData[x.key].map(y => {
              return {
                value: y.area,
                percentageYoy: y.tb,
                percentageMom: y.hb,
              }
            })),
            name: x.name,
            z: x.z,
            ...tempObj
          })
        })
      } else { // 规划、未开工、在建面积
        if (resData && Object.keys(resData)?.length) {
          const tempLabel = housePropertyLandSupplyStatisticsData.value.acreageTypeList?.find(x => x.code === housePropertyLandSupplyStatisticsData.value.acreageType)?.label
          const tempKeyArray = [{name: '规划', acreageName: '商业', key: 'symjList', z: 2},{name: '未开工', acreageName: '住宅', key: 'zzmjList', z: 1}]
          tempKeyArray.forEach(x => {
            landSupplyTrendData.value.seriesData.push({
              data: [0].concat(resData[x.key].map(y => {
                return {
                  value: y?.area,
                  percentageYoy: y?.tb,
                  percentageMom: y?.hb,
                }
              })),
              name: `${tempLabel}-${x.acreageName}`,
              z: x.z,
              ...tempObj
            })
          })
        }
      }
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      landSupplyTrend.value?.updateChart();
      if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'landSupplyTrend') { // 土地供应走势-弹窗
        dialogRef.value.updateChart();
      }
    })
  })
}

const initLocalCityEveryAreaHousePropertyAcreageSupplyStatistics = () => { // 弹窗-本地各区房地产面积供应统计-getData
  getSupplyDemandGetAreaSupplyStats({
    adcode: localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.areaCode,
    dateType: localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.type,
    startTime: localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.startTime,
    endTime: localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.endTime,
    requestType: currentHousePropertyAcreageTab.value
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value = {
        ...localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value,
        xAxisData: [],
        seriesData: [],
        lineData: []
      }
      resData?.forEach(x => {
        localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.xAxisData?.push(x.regionName)
        localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.seriesData?.push({
          ...x,
          value: x.area,
        })
        localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.lineData?.push(x.qhzq)
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      localCityEveryAreaHousePropertyAcreageSupplyStatistics.value?.updateChart();
    })
  })
}

const initHousePropertyHouseInventoryStatistics = () => { // 房地产房屋库存统计-待售房屋供应情况-getData
  getSupplyDemandGetHousingInventoryStats({
    adcode: housePropertyHouseInventoryStatisticsData.value.areaCode,
    dateType: housePropertyHouseInventoryStatisticsData.value.type,
    startTime: housePropertyHouseInventoryStatisticsData.value.startTime,
    endTime: housePropertyHouseInventoryStatisticsData.value.endTime,
    requestType: housePropertyHouseInventoryStatisticsData.value.inventoryType
  }).then(res => {
    const resData = res?.data
    housePropertyHouseInventoryStatisticsData.value.seriesData = []
    if (housePropertyHouseInventoryStatisticsData.value.inventoryType === 0) { // 全部面积
      if (resData?.length) {
        housePropertyHouseInventoryStatisticsData.value.seriesData = resData?.map(x => {
          return {
            ...x,
            name: x.typeName,
            value: x.sumArea,
            percentageYoy: x.sumTb,
            percentageMom: x.sumHb
          }
        })
      }
    } else { // 已建未售、法拍、预售待售、待售面积
      if (resData && Object.keys(resData)?.length) {
        const tempLabel = housePropertyHouseInventoryStatisticsData.value.inventoryTypeList?.find(x => x.code === housePropertyHouseInventoryStatisticsData.value.inventoryType)?.name
        housePropertyHouseInventoryStatisticsData.value.seriesData.push({
          ...resData?.['symjMap'],
          name: `${tempLabel}-刚需`,
          value: resData?.['symjMap']?.symj,
          percentageYoy: resData?.['symjMap']?.symjTb,
          percentageMom: resData?.['symjMap']?.symjHb
        })
        housePropertyHouseInventoryStatisticsData.value.seriesData.push({
          ...resData?.['zzmjMap'],
          name: `${tempLabel}-改善`,
          value: resData?.['zzmjMap']?.zzmj,
          percentageYoy: resData?.['zzmjMap']?.zzmjTb,
          percentageMom: resData?.['zzmjMap']?.zzmjHb
        })
      }
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      housePropertyHouseInventoryStatistics.value?.updateChart();
    })
  })
}

const initHousePropertyHouseInventoryStatisticsInventoryTrend = () => { // 房地产房屋库存统计-库存走势-getData
  getSupplyDemandGetInventoryTrend({
    adcode: housePropertyHouseInventoryStatisticsData.value.areaCode,
    requestType: housePropertyHouseInventoryStatisticsData.value.inventoryType,
    dateType: inventoryTrendData.value.xAxisTimeType === 'month' ? 1 : 2
  }).then(res => {
    const resData = res?.data
    inventoryTrendData.value.xAxisData = [0]
    inventoryTrendData.value.seriesData = []
    if (resData?.dateList?.length) inventoryTrendData.value.xAxisData = inventoryTrendData.value.xAxisData.concat(resData.dateList)
    const tempObj = {
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.7,
      },
    }
    const tempKeyArray = [
      {name: '已建未售', key: 'yjwjList', id: 1},
      {name: '预售待售', key: 'ysdsList', id: 4},
      {name: '待售', key: 'dsList', id: 5},
      {name: '二手房', key: 'esfList', id: 2},
      {name: '法拍房', key: 'fpfList', id: 3},
      {name: '停缓建', key: 'thjList', id: 6},
    ]
    if (housePropertyHouseInventoryStatisticsData.value.inventoryType === 0) { // 全部库存
      tempKeyArray.forEach(x => {
        inventoryTrendData.value.seriesData.push({
          data: [0].concat(resData[x.key].map(y => {
            return {
              value: y?.sumArea,
              percentageYoy: y?.sumTb,
              percentageMom: y?.sumHb,
            }
          })),
          name: `${x.name}`,
          ...tempObj
        })
      })
    } else { // 已建未售、法拍房、预售待售、待售
      if (resData && Object.keys(resData)?.length) {
        const tempLabel = tempKeyArray?.find(x => x.id === housePropertyHouseInventoryStatisticsData.value.inventoryType)?.name
        const tempDataArray = [{name: '刚需', key: 'gxmjList', z: 2},{name: '改善', key: 'gsList', z: 1}]
        tempDataArray.forEach(x => {
          inventoryTrendData.value.seriesData.push({
            data: [0].concat(resData[x.key].map(y => {
              return {
                value: y?.area,
                percentageYoy: y?.tb,
                percentageMom: y?.hb,
              }
            })),
            name: `${tempLabel}-${x.name}`,
            z: x.z,
            ...tempObj
          })
        })
      }
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      inventoryTrend.value?.updateChart();
      if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'inventoryTrend') { // 库存走势-弹窗
        dialogRef.value.updateChart();
      }
    })
  })
}

const initHousePropertyHouseSupplyStatisticsInventoryTrend = (cityCode, date) => { // 房地产房屋库存统计-库存走势
  let tempNameList = housePropertyHouseInventoryStatisticsData.value?.typeList?.filter(x => x.show)?.map(x => x.label)
  inventoryTrendData.value.seriesData = inventoryTrendData.value.originalSeriesData.map(x => {
    return {
      ...x,
      data: tempNameList.includes(x.name) ? x.data : [],
    }
  })
}

const changeProductAndBuyerRelationshipHouseTypeCascader = () => { // 房地产销售情况统计-产品与购房人关系-房屋标签筛选
  initProductAndBuyerRelationship(); // 房地产销售情况统计-产品与购房人关系-graph图
}

const changeProductAndBuyerRelationshipBuyHousePersonCascader = () => { // 房地产销售情况统计-产品与购房人关系-购房人标签筛选
  initProductAndBuyerRelationship(); // 房地产销售情况统计-产品与购房人关系-graph图
}

const changeHouseSalesTrendStatisticsHouseTypeCascader = () => { // 房地产销售情况统计-房屋销量趋势统计-房屋标签筛选-line图
  initHouseSalesTrendStatistics(); // 房地产销售情况统计-房屋销量趋势统计-line
}

const publicHandleCascaderData = (type) => { // 处理级联接口入参数据
  let filtrateParams = {}
  if (type === 'graph' ? (productAndBuyerRelationshipData.value.houseTag?.length || productAndBuyerRelationshipData.value.buyHousePersonTag?.length) : houseSalesTrendStatisticsData.value.houseTag) { // 房屋标签、购房人标签
    const tempArray = type === 'graph' ? [...productAndBuyerRelationshipData.value.houseTag, ...productAndBuyerRelationshipData.value.buyHousePersonTag] : [...houseSalesTrendStatisticsData.value.houseTag]
    tempArray.forEach(x => {
      if (filtrateParams[x[0]]) {
        filtrateParams[x[0]].push(x[1])
      } else {
        filtrateParams[x[0]] = [x[1]]
      }
    })
  }
  return Object.keys(filtrateParams)?.length ? filtrateParams : null
}

const initProductAndBuyerRelationship = () => { // 房地产销售情况统计-产品与购房人关系-关系图
  const apiFiltrateParams = publicHandleCascaderData('graph'); // 级联筛选数据
  if (!apiFiltrateParams) {
    productAndBuyerRelationshipData.value.seriesData.data = []
    productAndBuyerRelationshipData.value.seriesData.links = []
    return ElMessage({
      message: '请至少选择一项标签',
      type: 'warning',
    })
  }
  getTransanalysisRecommendedMainstreamLayout({
    xzqhdm: productAndBuyerRelationshipData.value.areaCode,
    timeDimension: productAndBuyerRelationshipData.value.type,
    startYearMonth: productAndBuyerRelationshipData.value.startTime,
    endYearMonth: productAndBuyerRelationshipData.value.endTime,
    param: apiFiltrateParams
  }).then(res => {
    const resData = res?.data
    if (resData?.nameList?.length) {
      productAndBuyerRelationshipData.value.seriesData.data = []
      productAndBuyerRelationshipData.value.seriesData.categories = []
      productAndBuyerRelationshipData.value.seriesData.data = resData?.nameList?.map(x=> {
        productAndBuyerRelationshipData.value.seriesData.categories.push(x.category)
        return {
          ...x,
          id: x.name,
        }
      })
      productAndBuyerRelationshipData.value.seriesData.categories = [...new Set(productAndBuyerRelationshipData.value.seriesData.categories)]
    }
    if (resData?.mappingList?.length) {
      productAndBuyerRelationshipData.value.seriesData.links = resData?.mappingList?.map(x=> {
        const lineWidth = x.num <= 10 ? 1 : (x.num >= 50 ? 5 : (x.num/10))
        return {
          source: x.name,
          target: x.mappingName,
          lineStyle: {
            width: pxToRem(lineWidth)
          },
          category: `关联数：${x.num}`
        }
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      productAndBuyerRelationship.value.updateChart()
    })
  })
}

const initHouseSalesTrendStatistics = () => { // 房地产销售情况统计-房屋销量趋势统计-line-getData
  const apiFiltrateParams = publicHandleCascaderData('line');
  if (!apiFiltrateParams) {
    houseSalesTrendStatisticsData.value.xAxisData = []
    houseSalesTrendStatisticsData.value.seriesData = [[], []]
    return ElMessage({
      message: '请至少选择一项标签',
      type: 'warning',
    })
  }
  const newApiFiltrateParams = {
    hxList: apiFiltrateParams.hx || undefined,
    fwcxList: apiFiltrateParams.fwcx || undefined,
    hxjgList: apiFiltrateParams.hxjg || undefined,
    jzysList: apiFiltrateParams.jzys || undefined,
    kfsList: apiFiltrateParams.kfs || undefined,
  }
  getSupplyDemandGetHouseSales({
    adcode: houseSalesTrendStatisticsData.value.areaCode,
    dateType: houseSalesTrendStatisticsData.value.xAxisTimeType === 'month' ? 1 : 2,
    ...newApiFiltrateParams
  }).then(res => {
    const resData = res?.data
    if (resData?.dateList?.length) {
      houseSalesTrendStatisticsData.value.xAxisData = resData?.dateList
      houseSalesTrendStatisticsData.value.xAxisData.unshift(0)
    }
    if (resData?.kcNum?.length) {
      houseSalesTrendStatisticsData.value.seriesData[0] = []
      let tempList = resData?.kcNum
      tempList.unshift(0)
      houseSalesTrendStatisticsData.value.seriesData[0] = tempList
    }
    if (resData?.saleNum?.length) {
      houseSalesTrendStatisticsData.value.seriesData[1] = []
      let tempList = resData?.saleNum
      tempList.unshift(0)
      houseSalesTrendStatisticsData.value.seriesData[1] = tempList
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      houseSalesTrendStatistics.value?.updateChart();
      if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'houseSalesTrendStatistics') { // 房地产销售情况统计-房屋销量趋势统计-放大弹窗
        dialogRef.value.updateChart();
      }
    })
  })
}

const initMicroEconomicDataStatistics = (cityCode, date) => { // 微观经济数据统计-getData
  getPersonHousePersonHousePopulation({
    adcode: cityCode,
    dateType: 3,
    startTime: date[0],
    endTime: date[1]
  }).then(res => {
    const resData = res?.data
    microEconomicDataStatisticsAllAgesData.value.seriesData = []
    microEconomicDataStatisticsAlreadyBoughtHouseData.value.seriesData = []

    clusterData.value.afterClusterData.seriesData = []

    if (resData?.leftEntity?.ageList?.length) {
      microEconomicDataStatisticsAllAgesData.value.xAxisData = resData?.leftEntity?.ageList
      microEconomicDataStatisticsAllAgesData.value.seriesData.push(resData?.leftEntity?.allPeopleList)
      microEconomicDataStatisticsAllAgesData.value.seriesData.push(resData?.leftEntity?.overPayList)
    }
    if (resData?.rightEntity?.ageList?.length) {
      microEconomicDataStatisticsAlreadyBoughtHouseData.value.xAxisData = resData?.rightEntity?.ageList

      // clusterData.value.afterClusterData.xAxisData = resData?.rightEntity?.ageList
      clusterData.value.afterClusterData.xAxisData = ['画像1', '画像2', '画像3', '画像4', '画像5']

      const boxPlotData = processBoxPlotData(resData?.rightEntity?.resultList[0]);
      const boxPlotData1 = processBoxPlotData(resData?.rightEntity?.resultList[1]);
      microEconomicDataStatisticsAlreadyBoughtHouseData.value.seriesData.push(boxPlotData)
      microEconomicDataStatisticsAlreadyBoughtHouseData.value.seriesData.push(boxPlotData1)

      clusterData.value.afterClusterData.seriesData = [
        [
          ['222.00', '388.50', '555.00', '721.50', '888.00'],
          ['111.00', '250', '444.00', '750', '777.00'],
          ['50.00', '100.50', '250.00', '400', '450.00'],
          ['300', '350', '450', '550', '600'],
          ['150', '200', '250', '300', '350']
        ],
        [
          ['250.00', '300', '325.5', '380', '400'],
          ['400', '450', '500', '550', '600'],
          ['200', '240', '300', '500', '550'],
          ['140', '300', '320', '340', '800'],
          ['66', '256', '356', '456', '556']
        ],
        [
          ['100', '200', '300', '400', '500'],
          ['150', '250', '350', '450', '550'],
          ['250', '350', '450', '550', '650'],
          ['350', '450', '550', '650', '750'],
          ['450', '550', '650', '750', '850']
        ],
        [
          ['450', '550', '650', '750', '850'],
          ['350', '450', '550', '650', '750'],
          ['250', '350', '450', '550', '650'],
          ['100', '200', '300', '400', '500'],
          ['150', '250', '350', '450', '550']
        ]
      ]
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
  })
}

const changeHousePropertyAcreageTab = () => { // 切换本地各区房地产面积供应统计tab
  if (localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.startTime) initLocalCityEveryAreaHousePropertyAcreageSupplyStatistics();
}

const mapNameChange = (data) => { // 地图点击触发
  cityObj.value.name = cityObj.value.name == data.cityName ? '' : data.cityName;
  cityObj.value.code = cityObj.value.code == data.cityCode ? '' : data.cityCode;
  initPage(data.cityCode, currentYearRange.value);
}

const getHouseAndBuyHouseTypeList = (type) => { // 获取级联房屋标签和购房人标签list
  return new Promise((resolve, reject) => {
    getSupplyDemandLabelProperty({
      adcode: cityObj.value.code
    }).then(res => {
      const resData = res?.data
      if (resData && Object.keys(resData)?.length) {
        let tempHouseTypeCheckList = []
        let tempBuyHousePersonTypeCheckList = []
        let tempHouseSalesTrendStatisticsHouseTypeCheckList = []
        productAndBuyerRelationshipData.value.houseOptions = resData?.slice(0, 5)?.map(x => { // 房屋标签
          if (['hx'].includes(x.key)) {
            tempHouseTypeCheckList = tempHouseTypeCheckList.concat(
                x?.data.map(j => {
                  return [x.key, j]
                })
            )
            tempHouseSalesTrendStatisticsHouseTypeCheckList = tempHouseSalesTrendStatisticsHouseTypeCheckList.concat(
                x?.data.map(j => {
                  return [x.key, j]
                })
            )
          }
          return {
            label: x.name,
            value: x.key,
            children: !x.data?.length ? [] : x.data?.map(y => {
              return {
                label: y,
                value: y,
              }
            })
          }
        }) || []
        productAndBuyerRelationshipData.value.buyHousePersonOptions = resData?.slice(5, 8)?.map(x => { // 房屋标签
          if (x.key === 'nlqj') {
            tempBuyHousePersonTypeCheckList = tempBuyHousePersonTypeCheckList.concat(
                x?.data.map(j => {
                  return [x.key, j]
                })
            )
          }
          return {
            label: x.name,
            value: x.key,
            children: !x.data?.length ? [] : (x.key === 'hjszd' ? [{ label: '省内', value: '省内' }, { label: '省外', value: '省外' }] : x.data?.map(y => {
              return {
                label: y,
                value: y,
              }
            }))
          }
        }) || []
        if (tempHouseTypeCheckList?.length) {
          productAndBuyerRelationshipData.value.houseTag = [...tempHouseTypeCheckList]
          houseSalesTrendStatisticsData.value.houseTag = [...tempHouseSalesTrendStatisticsHouseTypeCheckList]
        }
        if (tempBuyHousePersonTypeCheckList?.length) productAndBuyerRelationshipData.value.buyHousePersonTag = tempBuyHousePersonTypeCheckList
      }
      resolve(true)
    }).catch(error => {
      console.log(error);
      resolve(false)
    })
  })
}

const initPage = async (cityCode, date) => {
  initHousePropertyLandSupplyStatisticsSunBurst() // 房地产土地供应统计-新增房屋建筑面积情况
  initHousePropertyLandSupplyStatisticsLandSupplyTrend() // 房地产土地供应统计-土地供应走势
  initHousePropertyHouseInventoryStatistics() // 房地产房屋库存统计-待售房屋供应情况
  initHousePropertyHouseInventoryStatisticsInventoryTrend() // 房地产房屋库存统计-库存走势
  initLocalCityEveryAreaHousePropertyAcreageSupplyStatistics() // 本地各区房地产面积供应统计
  initMicroEconomicDataStatistics(cityCode, date)
  getPulicTopInfoFiltrateAreaList(cityCode)
  const isResolve = await getHouseAndBuyHouseTypeList() // 获取级联房屋标签、购房人标签
  if (isResolve) {
    initProductAndBuyerRelationship() // 房地产销售情况统计-产品与购房人关系-graph
    initHouseSalesTrendStatistics() // 房地产销售情况统计-房屋销量趋势统计-line
  }
}

const getYearRange = (res) => {
  currentYearRange.value = res;
  initPage(cityObj.value.code, currentYearRange.value);
}

const fullSc = (componentName, componentParams, moduleName) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  magnifyData.value.moduleName = moduleName;
  switch(componentName) {
    case 'publicPie': // 旭日图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h250 dialog-h250'
      };
      magnifyData.value.dialogWidth = '50%';
      magnifyData.value.dialogTop = '15vh';
      break;
    case 'lineLandSupplyTrend': // 土地供应走势
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h250 dialog-h250'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'lineInventoryTrend': // 库存走势
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h250 dialog-h250',
        // typeList: housePropertyHouseInventoryStatisticsData.value.typeList
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barLocalCityEveryAreaHousePropertyAcreageSupplyStatistics': // 本地各区房地产面积供应统计
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h132 dialog-h132'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'graphComponent': // 房地产销售情况统计-产品与购房人关系
      magnifyData.value.props = {
        graphData: componentParams,
        class: 'h275 dialog-h275'
      };
      magnifyData.value.dialogWidth = '60%';
      magnifyData.value.dialogTop = '15vh';
      break;
    case 'lineHouseSalesTrendStatistics': // 房地产销售情况统计-房屋销量趋势统计
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h135 dialog-h135'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'housePropertyTradeClusterAnalysis': // 房地产交易画像分析
      magnifyData.value.props = {
        tradeClusterData: componentParams,
        class: 'dialog-h250 dialog-h293 dialog-h220'
      };
      magnifyData.value.dialogWidth = '80%';
      break;
  }
};

const dialogEmit = ({type, value}) => { // dialog的v-on
  switch(type) {
    case 'landSupplyTrend': // dialog-土地供应走势-chart图
      landSupplyTrendData.value.xAxisTimeType = value
      break;
    case 'housePropertyHouseInventoryStatistics': // dialog-待售房屋供应情况-chart图
      changeWaitingForSaleHouseSupplyingConditionTabs(value)
      break;
    case 'inventoryTrend': // dialog-库存走势-chart图
      inventoryTrendData.value.xAxisTimeType = value
      break;
    case 'houseSalesTrendStatistics': // dialog-房地产销售情况统计-房屋销量趋势统计-line图
      houseSalesTrendStatisticsData.value.xAxisTimeType = value
      break;
  }
}

const goOtherPage = (item) => { // 顶部导航
  switch(item) {
    case '分析':
      router.push('/housePropertyAnalysis/analysis')
      break;
    case '模拟测算':
      router.push('/housePropertyAnalysis/forecast')
      break;
    default:
      break;
  }
}

const initNewHouseBuildingAreaCondition = () => { // 房地产土地供应统计-新增房屋建筑面积情况
  let tempNameList = housePropertyLandSupplyStatisticsData.value?.typeList?.filter(x => x.show)?.map(x => x.label)
  housePropertyLandSupplyStatisticsData.value.seriesData = housePropertyLandSupplyStatisticsData.value.originalSeriesData?.filter(x => tempNameList.includes(x.name))
/*  if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'inventorySalesPeriodHousePropertyNewSalesPriceTrend') {
  }*/
}

const changeNewHouseBuildingAreaConditionTabs = (res) => { // 房地产土地供应统计-新增房屋建筑面积情况-图例-点击
  res.show = !res.show;
  initNewHouseBuildingAreaCondition();
  if (housePropertyLandSupplyStatistics.value) housePropertyLandSupplyStatistics.value?.updateChart();
  if (magnifyData.value.dialogVisible && dialogRef.value) dialogRef.value.updateChart(); // 弹窗内chart图
}

const getPulicTopInfoFiltrateAreaList = (cityCode) => { // 获取公共筛选区列表
  getSupplyDemandGetRegion({adcode: cityCode}).then(res => {
    const resData = res?.data
    if (resData?.length) {
      cityAndAreaList.value = resData?.map(x => {
        return {
          name: x.regionName,
          code: x.regionCode
        }
      })
    }
  }).catch(error =>{
    console.log(error);
  })
}

const changeFiltrateTime = (event, type) => { // 模块顶部城市时间筛选
  switch (type) {
    case 'housePropertyLandSupplyStatistics': // 房地产土地供应统计-新增房屋建筑面积情况
      publicChangeFiltrateTime(housePropertyLandSupplyStatisticsData.value, event);
      initHousePropertyLandSupplyStatisticsSunBurst()
      break
    case 'housePropertyHouseInventoryStatistics': // 房地产房屋库存统计-待售房屋供应情况
      publicChangeFiltrateTime(housePropertyHouseInventoryStatisticsData.value, event);
      initHousePropertyHouseInventoryStatistics()
      break
    case 'housePropertySalesStatusStatistics': // 房地产销售情况统计
      publicChangeFiltrateTime(productAndBuyerRelationshipData.value, event);
      initProductAndBuyerRelationship()
      break
    case 'housePropertyTradeClusterAnalysis': // 房地产交易画像分析
      publicChangeFiltrateTime(productAndBuyerRelationshipData.value, event);
      break
    case 'localCityEveryAreaHousePropertyAcreageSupplyStatistics': // 本地各区房地产面积供应统计
      publicChangeFiltrateTime(localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value, event);
      initLocalCityEveryAreaHousePropertyAcreageSupplyStatistics()
      break
  }
}

const changeFiltrateTimeType = (type) => { // 模块顶部城市时间筛选-切换时间筛选类型
  switch(type) {
    case 'month':
      localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.type = 1
      break;
    case 'year':
      localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.type = 2
      break;
    case 'monthrange':
      localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.type = 3
      break;
    default: // yearrange
      localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.type = 4
      break;
  }
}

const changeHousePropertyLandSupplyStatisticsSelect = () => { // 房地产土地供应统计-顶部筛选
  initHousePropertyLandSupplyStatisticsSunBurst() // 房地产土地供应统计-新增房屋建筑面积情况
  initHousePropertyLandSupplyStatisticsLandSupplyTrend() // 房地产土地供应统计-土地供应走势
}

const changeHousePropertyHouseInventoryStatisticsSelect = () => { // 房地产房屋库存统计-顶部筛选
  initHousePropertyHouseInventoryStatistics() // 房地产房屋库存统计-待售房屋供应情况
  initHousePropertyHouseInventoryStatisticsInventoryTrend() // 房地产房屋库存统计-库存走势
}

const publicChangeFiltrateTime = (data, {areaCode, time, type}) => { // 公共处理-模块顶部公共筛选数据
  data.areaCode = areaCode || data.areaCode
  switch(type) {
    case 'month':
      data.type = 1
      data.startTime = time
      data.endTime = ''
      break;
    case 'year':
      data.type = 2
      data.startTime = time
      data.endTime = ''
      break;
    case 'monthrange':
      data.type = 3
      data.startTime = time[0]
      data.endTime = time[1]
      break;
    default: // yearrange
      data.type = 4
      data.startTime = time[0]
      data.endTime = time[1]
      break;
  }
}

onMounted(() => {
  const date = new Date()
  const currentYear = date.getFullYear();
  currentYearRange.value = [currentYear - 2, currentYear];
  currentYearMonthDay.value = `${currentYear}年${date.getMonth() + 1}月${date.getDate()}日`;
  housePropertyLandSupplyStatisticsData.value.startTime = currentYear - 1
  housePropertyHouseInventoryStatisticsData.value.startTime = currentYear - 1
  productAndBuyerRelationshipData.value.startTime = currentYear - 1
  localCityEveryAreaHousePropertyAcreageSupplyStatisticsData.value.startTime = currentYear - 1
  initPage(cityObj.value.code, currentYearRange.value);
})
</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyAnalysis/statistics/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/housePropertyAnalysis/statistics/header-bg@2x.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    > span {
      font-size: 30px;
      margin-bottom: 20px;
      text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6);
    }

    .top-tab {
      display: flex;

      .top-tab-left {
        position: absolute;
        top: 33px;
        left: 200px;
        display: flex;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        &-item:first-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/chosen-top-tab-bg@2x.png");
          background-size: 100% 100%;
        }

        &-item:last-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/top-tab-bg@2x.png");
          background-size: 100% 100%;
          margin-left: -25px;
        }
      }

      .top-tab-right {
        position: absolute;
        top: 33px;
        right: 375px;
        display: flex;
        align-items: center;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("@/assets/img/housePropertyAnalysis/statistics/flip-horizontal-top-tab-bg@2x.png");
          background-size: 100% 100%;
          cursor: pointer;
        }

        span {
          position: absolute;
          font-size: 15px;
          right: -150px;
        }
      }
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 50px;
    box-sizing: border-box;
    height: calc(100vh - 111px);

    .main-content-gird-title {
      width: 100%;
      display: flex;
      align-items: center;

      &-logo {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }

      p {
        font-size: 18px;
      }

      &-economic-statistics {
        display: flex;
        align-items: center;
      }
    }

    .module-title-content-middle-line {
      width: 100%;
      border: 1px solid;
      margin: 6px 0 21px;
      border-image: linear-gradient(297deg, rgba(97, 228, 255, 0), rgba(50, 197, 255, 1), rgba(102, 255, 255, 1), rgba(50, 197, 255, 1), rgba(50, 197, 255, 0)) 1 1;
    }

    .m-b-11 {
      margin-bottom: 11px;
    }

    .time-filtrate-public {
      position: absolute;
      top: 15px;
      right: 15px;
    }

    .house-property-land-supply-statistics {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg@2x.png");
      background-size: 100% 100%;
      padding: 16px 11px 20px 16px;
      height: 340px;
      box-sizing: border-box;
      position: relative;

      .house-property-land-supply-statistics-total-select {
        position: absolute;
        top: 15px;
        right: 15px;
        display: flex;
        .house-property-land-supply-statistics-area-select {
          width: 80px;
          margin-right: 10px;
        }
        .house-property-land-supply-statistics-type-select {
          width: 90px;
        }
      }

      .house-property-land-supply-statistics__left {
        position: relative;
        &-title {
          font-size: 14px;
          line-height: 24px;
          .time-filtrate-public {
            top: 0;
            right: 0;
          }
        }
      }

      .house-property-land-supply-statistics__right {
        &-title {
          font-size: 14px;
          line-height: 24px;
        }
      }
    }

    .local-city-every-area-house-property-acreage-supply-statistics {
      position: relative;
      margin-top: 20px;
      background: url("@/assets/img/housePropertyAnalysis/analysis/module-bg-left-bottom-648-270.png");
      background-size: 100% 100%;
      padding: 16px;
      height: 235px;
      box-sizing: border-box;

      .house-property-acreage-tabs {
        position: absolute;
        right: 195px;
        top: 15px;
      }
      .house-property-acreage-tabs-year-range {
        right: 280px;
      }

      :deep(.el-tabs) {
        display: flex;
        align-items: center;

        .el-tabs__header {
          margin: 0;
        }

        .el-tabs__nav-wrap:after {
          height: 0;
        }

        .el-tabs__active-bar {
          height: 0;
        }

        .el-tabs__item {
          border-radius: 5px;
          text-align: center;
          height: 30px;
          color: white;
          background: #000022;
          box-shadow: inset 0px 0px 8px 0px #3D7FFF;
          border-radius: 8px;
          border: 1px solid #0839A7;
          font-size: 12px;
          padding: 6px;
        }

        .el-tabs__item:not(:last-child) {
          margin-right: 5px;
        }

        .el-tabs__item.is-active {
          background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
        }
      }
    }

    .house-property-house-inventory-statistics {
      position: relative;
      margin-top: 20px;
      padding: 16px 11px 25px 16px;
      height: 340px;
      box-sizing: border-box;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-square-648-331.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .house-property-house-inventory-statistics-total-select {
        position: absolute;
        top: 15px;
        right: 15px;
        display: flex;
        .house-property-house-inventory-statistics-area-select {
          width: 80px;
          margin-right: 10px;
        }
        .house-property-house-inventory-statistics-type-select {
          width: 90px;
        }
      }
      .house-property-house-inventory-statistics__left {
        position: relative;
        &-title {
          font-size: 14px;
          line-height: 24px;
          .time-filtrate-public {
            top: 0;
            right: 0;
          }
        }
      }
      .house-property-house-inventory-statistics__right {
        &-title {
          font-size: 14px;
          line-height: 24px;
        }
      }
    }

    .middle-map {
      height: 545px;

      .map-address {
        position: absolute;
        top: 0px;
        left: 0px;
        letter-spacing: 1px;
        text-shadow: 0px 1px 2px #c1731c;
        font-size: 18px;
        color: #60f9f4;
        letter-spacing: 1.2px;
        margin-left: 27px;
      }

      .map-address::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -27px;
        width: 20px;
        height: 20px;
        background: url("@/assets/img/personInfor/map-address.png");
        background-size: 100% 100%;
      }

      .date-filtrate {
        position: absolute;
        top: 0px;
        right: 0px;
        display: flex;
        height: 30px;
      }
    }

    .house-property-sales-status-statistics {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-648-575.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px 10px 2px 16px;
      box-sizing: border-box;
      height: 545px;
      position: relative;

      .house-property-sales-status-statistics-select {
        display: flex;
        align-items: center;
        > div {
          display: flex;
          align-items: center;
          span {
            font-size: 12px;
          }
        }
        > div:first-child {
          margin-right: 20px;
        }
        /deep/ .house-property-sales-status-statistics-house-type-select, /deep/ .house-property-sales-status-statistics-buy-house-person-select {
          .el-input__wrapper {
            width: 200px;
          }
          .el-tag {
            max-width: 67%;
          }
        }
      }

      .product-and-buyer-relation-ship-chart {
        height: 275px;
      }

      .house-property-sales-status-statistics__title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        > div > span {
          font-size: 14px;
          margin-right: 24px;
        }

        .house-property-sales-select {
          width: 15%;

          :deep(.el-select__wrapper) {
            background: #001A35;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            border: 1px solid #0839A7;

            .el-select__selected-item {
              color: white;
            }
          }
        }

        .house-property-sales-select:nth-of-type(1) {
          margin-right: 16px;
        }

        .house-property-sales-trend-statistics-select {
          width: 100%;
          display: flex;
          align-items: center;
          span {
            font-size: 12px;
            margin-right: 5px;
          }
          .house-property-sales-trend-statistics-city-or-area-select {
            margin-left: 20px;
            width: 80px;
          }
          /deep/ .house-property-sales-status-statistics-house-type-select {
            .el-input__wrapper {
              width: 220px;
            }
            .el-tag {
              max-width: 67%;
            }
          }
        }
      }
    }

    .economic-data-statistics {
      position: relative;
      padding: 12px 0 19px 14px;
      //margin-top: 20px;
      box-sizing: border-box;
      //height: 369px;

      .economic-data-statistics__title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .micro-macro-btns {
          display: flex;
          align-items: center;
          justify-content: center;

          .micro-macro-btn {
            padding: 5px 10px;
            background: #000022;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
          }

          .micro-macro-btn:first-child {
            margin-right: 20px;
          }

          .active-micro-macro-btn {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }

      .macro-economic-data-statistics-tabs {
        position: relative;

        :deep(.el-tabs) {
          position: absolute;
          left: 60px;
          top: 0;
          height: 46px;
          display: flex;
          align-items: center;

          .el-tabs__header {
            margin: 0;
          }

          .el-tabs__nav-wrap:after {
            height: 0;
          }

          .el-tabs__active-bar {
            height: 0;
          }

          .el-tabs__item {
            text-align: center;
            padding: 0 10px;
            font-size: 10px;
            height: 30px;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            color: white;
          }

          .el-tabs__item:not(:last-child) {
            margin-right: 5px;
          }

          .el-tabs__item.is-active {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }
    }

    .main-content-right-bottom {
      position: relative;
      padding: 16px 18px 19px 14px;
      margin-top: 20px;
      box-sizing: border-box;
      height: 389px;
      margin-top: 20px;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-long-right-bottom.png");
      background-size: 100% 100%;
    }
  }
}

:deep(.triangle) {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid #E13535;
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}

:deep(.triangle-reverse) {
  transform: rotate(180deg);
  border-top: 5px solid #01FEFF;
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }

  .triangle {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #E13535;
    border-top: 0;
  }

  .triangle-reverse {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #01FEFF;
    border-bottom: 0;
  }
}
.house-property-acreage-select {
  width: 90px;
}
/deep/ .el-select__wrapper {
  background: #204485;
  .el-select__selected-item {
    color: white;
  }
}
.custom-select-option{
  color:#ffffff;
  background: #1C5BCC;
}
.custom-select-option.is-selected{
  color: #00e0ff;
}
.custom-select-option:hover{
  background:#368CF2;
}

/deep/ .multiple-select {
  .el-input__wrapper {
    background-color: #204485;
  }
  .el-input__inner::placeholder {
    color: white !important;
  }
}
</style>
<style lang="less">
.cascader-public-popper {
  .el-cascader-node {
    color: white;
  }
  .is-active.el-cascader-node {
    color: #00e0ff;
  }
  .el-cascader-node:hover, .el-cascader-node:focus {
    background-color: #368CF2;
  }
}
</style>